@HANDLE_OFFSET: 0px;
@ONE_SIDE_HANDLE_SIZE: 3px + @HANDLE_OFFSET;
@TWO_SIDE_HANDLE_SIZE: 6px + @HANDLE_OFFSET;
@BOTTOM_CORNER_ICON_POSITION: 20px;
@BOTTOM_CORNER_HANDLE_SIZE: @BOTTOM_CORNER_ICON_POSITION + @HANDLE_OFFSET;

.dx-resizable {
    display: block;
    position: relative;
}

.dx-resizable-handle {
    position: absolute;
    z-index: 50;

    .dx-state-disabled & {
        cursor: default;
    }
}

.dx-resizable-handle-left,
.dx-resizable-handle-right {
    top: -@HANDLE_OFFSET;
    height: 100%;
    width: @ONE_SIDE_HANDLE_SIZE;
}

.dx-resizable-handle-left {
    left: -@HANDLE_OFFSET;

    cursor: e-resize;
}

.dx-resizable-handle-right {
    right: -@HANDLE_OFFSET;

    cursor: e-resize;
}

.dx-resizable-handle-top,
.dx-resizable-handle-bottom {
    left: -@HANDLE_OFFSET;
    width: 100%;
    height: @ONE_SIDE_HANDLE_SIZE;
}

.dx-resizable-handle-top {
    top: -@HANDLE_OFFSET;

    cursor: s-resize;
}

.dx-resizable-handle-bottom {
    bottom: -@HANDLE_OFFSET;

    cursor: s-resize;
}

.dx-resizable-handle-corner-bottom-left,
.dx-resizable-handle-corner-top-left,
.dx-resizable-handle-corner-top-right {
    width: @TWO_SIDE_HANDLE_SIZE;
    height: @TWO_SIDE_HANDLE_SIZE;
}

.dx-resizable-handle-corner-top-left {
    left: -@HANDLE_OFFSET;
    top: -@HANDLE_OFFSET;

    cursor: se-resize;
    .border-radius-bottom-right(~"100%");
}

.dx-resizable-handle-corner-top-right {
    right: -@HANDLE_OFFSET;
    top: -@HANDLE_OFFSET;

    cursor: ne-resize;
    .border-radius-bottom-left(~"100%");
}

:not(.dx-rtl){
    & > .dx-resizable-handle-corner-bottom-right {
        width: @BOTTOM_CORNER_HANDLE_SIZE;
        height: @BOTTOM_CORNER_HANDLE_SIZE;

        right: -@HANDLE_OFFSET;
        bottom: -@HANDLE_OFFSET;

        cursor: se-resize;
        .border-radius-top-left(~"100%");

        background-position: @BOTTOM_CORNER_ICON_POSITION @BOTTOM_CORNER_ICON_POSITION;
    }

    & > .dx-resizable-handle-corner-bottom-left {
        left: -@HANDLE_OFFSET;
        bottom: -@HANDLE_OFFSET;

        cursor: ne-resize;
        .border-radius-top-right(~"100%");
    }

}

.dx-rtl {
    .dx-resizable-handle-corner-bottom-left {
        .rotate(90deg);

        width: @BOTTOM_CORNER_HANDLE_SIZE;
        height: @BOTTOM_CORNER_HANDLE_SIZE;

        left: -@HANDLE_OFFSET;
        bottom: -@HANDLE_OFFSET;

        cursor: ne-resize;
        .border-radius-top-left(~"100%");

        background-position: @BOTTOM_CORNER_ICON_POSITION @BOTTOM_CORNER_ICON_POSITION;
    }

    .dx-resizable-handle-corner-bottom-right {
        right: -@HANDLE_OFFSET;
        bottom: -@HANDLE_OFFSET;

        cursor: se-resize;
        .border-radius-top-left(~"100%");
    }
}
